<template>
  <view class="ssp-my-hell-sell">
    <!-- 已登录 -->
    <ScrollList
        v-if="isLogin"
        ref="scrollView"
        :scrollAnimation="false"
        isFixed
        @interrupt="interrupt"
        @scrolltolower="scrolltolower"
    >
      <template slot="content">
        <!-- 头部数据展示 -->
        <view class="data-wrap">
          <DataComponent :cardData="cardData" @handleInvite="$emit('handleInvite')" />
        </view>
        <!-- 金刚区 -->
        <QuickNav ref="quickNavRef" @customHandle="quickNavHandle" />
        <!-- 分割区域 -->
        <view class="line-section"></view>
        <!-- 帮卖列表nav+筛选区域  -->
        <view class="sticky-wrap">
          <!-- 帮卖列表nav -->
          <TitleInput @searchFn="handleSearch" />
          <!-- 筛选区域 -->
          <SortField @change="changeSort" :tabList="tabList"/>
        </view>
        <!-- 帮卖列表 -->
        <HelpSellList v-if="list.length" :list="list" />
        <!-- 缺省状态 -->
        <view v-else-if="!list.length&&isEmpty" :style="{height: 'calc(100vh - '+emptyHeight+'px)'}">
          <DefaultPage type="2" tips="暂时没有人帮你卖哦～" />
        </view>
      </template>
    </ScrollList>
    <!-- 未登录-缺省页 -->
    <view v-else>
      <!-- 头部数据展示 -->
      <DataComponent :cardData="cardData" />
      <view :style="{height: 'calc(100vh - '+noEmptyHeight+'px)'}" class="no-login-wrap">
        <DefaultPage
            type="2"
            tips="登录后查看更多优质内容"
            configText="了解速速团"
        />
      </view>
    </view>
    <!-- toast提示 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import ScrollList from '@/components/scrollList/index.vue'
import DataComponent from './components/dataComponent.vue'
import QuickNav from './components/quickNav'
import TitleInput from './components/titleInput'
import SortField from './components/sortField'
import HelpSellList from './components/helpSellList'
import DefaultPage from '@/components/defaultPage/index.vue'
import helpSellApi from '@/api/helpSellGroups.js'

export default {
  name: 'myHelpSell',
  components: {
    ScrollList,
    DataComponent,
    QuickNav,
    TitleInput,
    SortField,
    HelpSellList,
    DefaultPage,
  },
  data() {
    return {
      cardData: {
        totalHelpSellOrderAmount: 0, // 帮卖累计销售
        todayHelpSellOrderAmount: 0, // 今日已卖
        todayHelpSellOrderCount: 0, // 今日订单
        newHeadCount: 0, // 新增帮卖
      },
      list: [], // 我的帮卖列表
      isEmpty: false, // 是否显示空状态--配合list的长度使用，避免在页面一开始加载时先显示了空状态
      params: {
        headNickname: '', // 帮卖团长昵称
        pageSize: 10,
        currentPage: 1,
        sortField: 1, // 1:帮卖金额,2:粉丝数,3:帮卖时间
        sortType: 2, // 1:顺序,2:倒叙
      },
      listMore: true, // 当前列表是否还有更多
      tabList: [{name: '帮卖金额', sort: 1}, {name: '成员数', sort: 2}, {name: '帮卖时间', sort: 3}],
    }
  },
  computed: {
    // 空状态的高度
    emptyHeight() {
      const { navHeight, navBottom } = this.$store.state.globalData
      return navHeight + navBottom + 449 // 449
    },
    navHeight() {
      const { navHeight } = this.$store.state.globalData
      return navHeight
    },
    noEmptyHeight() {
      const { navHeight, navBottom } = this.$store.state.globalData
      return navHeight + navBottom + 241
    }
  },
  methods: {
    // 获取帮卖卡片数据
    getCardData() {
      helpSellApi.getHelpSellCard().then(res => {
        if (res.code === 200) {
          this.cardData = res.data
        }
      })
    },
    // 获取帮卖列表
    getList() {
      helpSellApi.getHelpSellList(this.params).then(res => {
        if (this.params.currentPage === 1) {
          this.list = res.data.records || []
          // 显示空状态
          if (!this.list.length) {
            this.isEmpty = true
            this.$refs.scrollView && this.$refs.scrollView.loadFinish(3,0)
          }
        } else {
          this.list = this.list.concat(res.data.records || [])
        }
        // 无更多标识
        if ((this.params.currentPage * this.params.pageSize) !== this.list.length) {
          this.listMore = false
          this.$refs.scrollView.loadFinish(3,0)
        }
      }).catch(() => {
        this.$refs.scrollView.loadFinish(3,0)
      })
    },
    // 金刚区方法
    quickNavHandle(type) {
      switch (type) {
        case 0:
          this.navigateTo({url: '/pagesA/helpSellGroups/toAudit'})
          break
        case 1:
          this.navigateTo({url: `/pagesB/helpSellIntroduce/index?accountId=${this.$store.state.userInfo.accountId}`})
          break
        case 2:
          this.navigateTo({url: '/pagesB/referralBonus/index'})
          break
        case 3:
          this.$refs.uToast.show({ title: '功能正在开发中~', type: 'warning', })
          break
        case 4:
          this.navigateTo({ url: '/pagesA/helpSellGroups/helpSellSetting' })
      }
    },
    // 搜索
    handleSearch(val) {
      this.params.headNickname = val
      this.params.currentPage = 1
      this.listMore = true

      this.scrollDiffSticky()
      this.getList()
    },
    // 筛选
    changeSort({ sortField, sortType }) {
      this.params.currentPage = 1
      this.listMore = true
      this.params.sortField = sortField
      this.params.sortType = sortType
      this.scrollDiffSticky()
      this.getList()
    },
    // 当sticky-wrap盒子距离顶部的top距离小于等于navHeight时，触发
    async scrollDiffSticky() {
      // 获取sticky-wrap盒子距离顶部的top距离
      const { top } = await this.getUNavbarHeight('.sticky-wrap')
      if (top <= this.navHeight) {
        // 滚动到指定位置
        const dataDom = await this.getUNavbarHeight('.data-wrap')
        const quickNavHeight = this.$refs.quickNavRef.domHeight
        this.$refs.scrollView.goToScroll(dataDom.height + quickNavHeight + 12)
      }
    },
    interrupt() {
      this.listMore = true
      this.params.currentPage = 1
      this.getCardData()
      this.getList()
      setTimeout(() => {
        this.$refs.scrollView && this.$refs.scrollView.refreshFinish() // 刷新完成
      }, 400)
    },
    scrolltolower() {
      if (this.isLogin) {
        ++this.params.currentPage
        this.getList()
        this.$refs.scrollView && this.$refs.scrollView.loadFinish(this.listMore ? 0 : 3) // 加载完成
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.ssp-my-hell-sell {
  height: 100%;
  .line-section {
    width: 100%;
    height: 12px;
    background-color: #F7F8FA;
  }
  .sticky-wrap {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 999;
  }
  .no-login-wrap {
    background-color: #F7F8FA;
  }
}
</style>
